<script setup>
import {onMounted, ref} from "vue";
import {getListByUid} from "@/api/classSchedule";

let list = ref()
onMounted(() => {
  getListByUid().then(res => {
    list.value = res.data;
  })
})
let statusCode = ref(null)
let filterFind = () => {
  getListByUid().then(res => {
    list.value = res.data;
    list.value = list.value.filter(itm => {
      return itm.status == statusCode.value
    })
  })

}
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <h1>查询课程信息</h1>
    </div>
    <div style="margin-bottom: 10px">
      <el-select v-model="statusCode" :on-change="filterFind">
        <el-option label="待上课" value="0">待上课</el-option>
        <el-option label="正在上课" value="1">正在上课</el-option>
        <el-option label="已上完" value="2">已上完课</el-option>
      </el-select>
    </div>
    <div>
      <el-button @click="filterFind">筛选</el-button>
    </div>
    <div>
      <el-table
          :data="list"
      >
        <el-table-column label="课名" prop="name"/>
        <el-table-column label="教室" prop="roomName"/>
        <el-table-column label="讲师" prop="teacherName"/>
        <el-table-column #default="{row}" label="状态">
          <el-tag v-if="row.status==0" type="warning">
            待上课
          </el-tag>
          <el-tag v-if="row.status==1" type="danger">
            上课中
          </el-tag>
          <el-tag v-if="row.status==2">
            已上课
          </el-tag>
        </el-table-column>
        <el-table-column label="开始时间" prop="startTime"/>
        <el-table-column label="结束时间" prop="endTime"/>
      </el-table>
    </div>
  </div>
</template>


